<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>💩 Eric拉粑粑</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Comic Sans MS', cursive, sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #000000;
            padding: 20px;
            overflow: hidden;
            color: #e0e0e0;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 1000px;
            width: 100%;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            width: 100%;
        }

        .header h1 {
            font-size: 3rem;
            margin-bottom: 10px;
            color: #ff5555;
            letter-spacing: 2px;
            text-shadow: 0 0 10px #ff0000;
        }

        .game-wrapper {
            position: relative;
            width: 100%;
            max-width: 900px;
            background: #f5f5f0;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(255, 100, 100, 0.5);
            border: 3px dashed #ff5555;
        }

        canvas {
            display: block;
            background-color: #f5f5f0;
            width: 100%;
        }

        .status {
            display: flex;
            justify-content: space-between;
            padding: 15px 25px;
            background: rgba(255, 200, 200, 0.9);
            color: #ff0000;
            font-size: 1.3rem;
            font-weight: bold;
            border-bottom: 3px dotted #ff5555;
        }

        .game-over {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(245, 245, 240, 0.95);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
            display: none;
        }

        .game-over h2 {
            color: #ff0000;
            font-size: 3.5rem;
            margin-bottom: 20px;
            text-shadow: 0 0 5px #ff9999;
        }

        .final-score {
            color: #aa0000;
            font-size: 2.2rem;
            margin-bottom: 30px;
        }

        .restart-btn {
            background: #ff5555;
            color: white;
            border: none;
            padding: 12px 40px;
            font-size: 1.4rem;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: bold;
            box-shadow: 0 0 10px #ff0000;
        }

        .restart-btn:hover {
            background: #ff0000;
            transform: scale(1.1);
        }

        .footer {
            margin-top: 30px;
            color: #ff9999;
            text-align: center;
            font-size: 1rem;
            width: 100%;
        }

        .poop-emoji {
            font-size: 20px;
            position: absolute;
            animation: fall 1.5s ease-in forwards;
        }

        @keyframes fall {
            to {
                transform: translateY(100px) rotate(180deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>💩 Eric拉粑粑</h1>
        </div>

        <div class="game-wrapper">
            <div class="status">
                <div>分数: <span id="score">0</span></div>
                <div>最高分: <span id="high-score">0</span></div>
            </div>
            <canvas id="gameCanvas" width="900" height="400"></canvas>
            <div class="game-over" id="gameOver">
                <h2>💩 游戏结束 💩</h2>
                <div class="final-score">得分: <span id="final-score">0</span></div>
                <button class="restart-btn" id="restartBtn">再拉一次</button>
            </div>
        </div>

        <div class="footer">
            <p>Eric专属</p>
        </div>
    </div>

    <script>
        // 游戏主逻辑
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreElement = document.getElementById('score');
        const highScoreElement = document.getElementById('high-score');
        const finalScoreElement = document.getElementById('final-score');
        const gameOverScreen = document.getElementById('gameOver');
        const restartBtn = document.getElementById('restartBtn');

        // 游戏常量
        const GROUND_HEIGHT = 40;
        const GRAVITY = 0.7;
        const JUMP_FORCE = -14;
        const DINO_WIDTH = 60;
        const DINO_HEIGHT = 80;
        const CACTUS_WIDTH = 30;
        const CACTUS_HEIGHT = 70;

        // 游戏变量
        let dino = {
            x: 100,
            y: canvas.height - GROUND_HEIGHT - DINO_HEIGHT,
            width: DINO_WIDTH,
            height: DINO_HEIGHT,
            velocity: 0,
            isJumping: false,
            frame: 0,
            lastPoopTime: 0,
            poopInterval: 1500 // 1.5秒拉一次
        };

        let ground = {
            x: 0,
            y: canvas.height - GROUND_HEIGHT,
            width: canvas.width,
            height: GROUND_HEIGHT
        };

        let obstacles = [];
        let score = 0;
        let highScore = localStorage.getItem('dinoHighScore') || 0;
        let gameSpeed = 6;
        let gameOver = false;
        let gameStarted = false;
        let animationId;
        let lastTime = 0;
        let clouds = [];
        let poops = [];

        highScoreElement.textContent = highScore;

        // 创建粑粑emoji
        function createPoop() {
            const now = Date.now();
            if (now - dino.lastPoopTime > dino.poopInterval) {
                dino.lastPoopTime = now;

                // 在页面上创建粑粑emoji动画
                const poopEmoji = document.createElement('div');
                poopEmoji.className = 'poop-emoji';
                poopEmoji.innerHTML = '💩';
                poopEmoji.style.left = `${dino.x + 30}px`;
                poopEmoji.style.top = `${dino.y + DINO_HEIGHT}px`;
                document.body.appendChild(poopEmoji);

                // 动画结束后移除
                setTimeout(() => {
                    poopEmoji.remove();
                }, 1500);

                // 在游戏画布上也记录粑粑
                poops.push({
                    x: dino.x + 30,
                    y: dino.y + DINO_HEIGHT,
                    size: 20,
                    opacity: 1,
                    emoji: '💩'
                });
            }
        }

        // 绘制恐龙（带Eric名字和粑粑效果）
        function drawDino() {
            // 绘制身体
            ctx.fillStyle = '#ff5555';
            ctx.fillRect(dino.x, dino.y + 15, dino.width - 10, dino.height - 15);

            // 绘制头部
            ctx.fillRect(dino.x + dino.width - 25, dino.y, 30, 25);

            // 绘制眼睛（生气表情）
            ctx.fillStyle = 'white';
            ctx.fillRect(dino.x + dino.width - 10, dino.y + 5, 8, 8);
            ctx.fillStyle = '#222';
            // 生气眼神
            ctx.fillRect(dino.x + dino.width - 10, dino.y + 7, 8, 2);

            // 绘制嘴巴（生气的倒三角）
            ctx.beginPath();
            ctx.moveTo(dino.x + dino.width - 20, dino.y + 20);
            ctx.lineTo(dino.x + dino.width - 10, dino.y + 25);
            ctx.lineTo(dino.x + dino.width - 20, dino.y + 30);
            ctx.fillStyle = '#222';
            ctx.fill();

            // 在恐龙身上绘制Eric名字
            ctx.fillStyle = '#ffffff';
            ctx.font = 'bold 14px Comic Sans MS';
            ctx.textAlign = 'center';
            ctx.fillText('ERIC', dino.x + (dino.width / 2) - 5, dino.y + (dino.height / 2) + 5);
            ctx.textAlign = 'left';

            // 绘制腿（奔跑动画）
            const legOffset = Math.sin(dino.frame * 0.5) * 7;
            ctx.fillRect(dino.x + 10, dino.y + dino.height, 12, -20 - legOffset);
            ctx.fillRect(dino.x + dino.width - 22, dino.y + dino.height, 12, -20 + legOffset);

            dino.frame += 0.2;
        }

        // 绘制地面（只保留恐龙走过的粑粑痕迹）
        function drawGround() {
            // 绘制地面主体
            ctx.fillStyle = '#ddd';
            ctx.fillRect(0, ground.y, canvas.width, ground.height);

            // 绘制地面纹理
            ctx.fillStyle = '#aaa';
            for (let i = 0; i < canvas.width + 40; i += 40) {
                const xPos = (ground.x + i) % 40;
                ctx.fillRect(xPos, ground.y + 10, 30, 3);
            }

            // 绘制恐龙走过的粑粑痕迹
            ctx.font = '20px Arial';
            poops.forEach(poop => {
                if (poop.x < dino.x + 200) { // 只显示恐龙走过的区域的粑粑
                    ctx.globalAlpha = poop.opacity;
                    ctx.fillText(poop.emoji, poop.x - ground.x, poop.y);
                    ctx.globalAlpha = 1.0;
                    poop.opacity -= 0.002; // 减慢消失速度
                }
            });

            // 移除消失的粑粑
            poops = poops.filter(poop => poop.opacity > 0);

            // 移动地面
            ground.x -= gameSpeed;
            if (ground.x <= -40) {
                ground.x = 0;
            }
        }

        // 创建障碍物（马桶造型）
        function createObstacle() {
            if (obstacles.length === 0 || obstacles[obstacles.length - 1].x < canvas.width - 300) {
                if (Math.random() < 0.02) {
                    obstacles.push({
                        x: canvas.width,
                        y: canvas.height - GROUND_HEIGHT - 70,
                        width: 40,
                        height: 70,
                        isToilet: true
                    });
                }
            }
        }

        // 绘制障碍物（全是马桶）
        function drawObstacles() {
            obstacles.forEach(obstacle => {
                // 绘制马桶
                ctx.fillStyle = '#ffffff';
                ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
                ctx.fillStyle = '#000000';
                ctx.fillRect(obstacle.x + 5, obstacle.y + 10, obstacle.width - 10, 30);

                // 马桶上的粑粑emoji
                ctx.font = '20px Arial';
                ctx.fillText('💩', obstacle.x + 10, obstacle.y + 30);

                // 移动障碍物
                obstacle.x -= gameSpeed;
            });

            // 移除超出画布的障碍物
            obstacles = obstacles.filter(obstacle => obstacle.x > -obstacle.width);
        }

        // 游戏主循环
        function gameLoop(timestamp) {
            if (!lastTime) lastTime = timestamp;
            const deltaTime = timestamp - lastTime;
            lastTime = timestamp;

            // 清除画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制米白色背景
            ctx.fillStyle = '#f5f5f0';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 绘制地面（带粑粑痕迹）
            drawGround();

            // 绘制恐龙（会自动拉粑粑）
            drawDino();
            createPoop(); // 边走边拉粑粑

            // 更新恐龙位置
            dino.y += dino.velocity;
            dino.velocity += GRAVITY;

            // 地面碰撞检测
            if (dino.y >= canvas.height - GROUND_HEIGHT - dino.height) {
                dino.y = canvas.height - GROUND_HEIGHT - dino.height;
                dino.velocity = 0;
                dino.isJumping = false;
            }

            // 创建障碍物（马桶）
            createObstacle();

            // 绘制障碍物
            drawObstacles();

            // 更新分数
            if (!gameOver) {
                score += Math.floor(gameSpeed / 2);
                scoreElement.textContent = score;

                if (score > 0 && score % 1000 === 0) {
                    gameSpeed += 0.7;
                }
            }

            // 碰撞检测
            for (const obstacle of obstacles) {
                if (dino.x < obstacle.x + obstacle.width &&
                    dino.x + dino.width > obstacle.x &&
                    dino.y < obstacle.y + obstacle.height &&
                    dino.y + dino.height > obstacle.y) {
                    if (!gameOver) {
                        gameOver = true;
                        if (score > highScore) {
                            highScore = score;
                            localStorage.setItem('dinoHighScore', highScore);
                            highScoreElement.textContent = highScore;
                        }
                        finalScoreElement.textContent = score;
                        gameOverScreen.style.display = 'flex';
                    }
                }
            }

            if (!gameOver) {
                animationId = requestAnimationFrame(gameLoop);
            }
        }

        // 重置游戏
        function resetGame() {
            dino = {
                x: 100,
                y: canvas.height - GROUND_HEIGHT - DINO_HEIGHT,
                width: DINO_WIDTH,
                height: DINO_HEIGHT,
                velocity: 0,
                isJumping: false,
                frame: 0,
                lastPoopTime: 0,
                poopInterval: 1500
            };
            obstacles = [];
            poops = [];
            score = 0;
            gameSpeed = 6;
            gameOver = false;
            gameStarted = true;
            scoreElement.textContent = score;
            gameOverScreen.style.display = 'none';
        }

        // 键盘控制
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space' || e.key === 'ArrowUp') {
                if (!dino.isJumping && !gameOver) {
                    dino.velocity = JUMP_FORCE;
                    dino.isJumping = true;
                    if (!gameStarted) {
                        gameStarted = true;
                        lastTime = 0;
                        animationId = requestAnimationFrame(gameLoop);
                    }
                }
            }
            if (e.key === 'r' || e.key === 'R') {
                resetGame();
                if (gameStarted) {
                    animationId = requestAnimationFrame(gameLoop);
                }
            }
            if (e.key === 'p' || e.key === 'P') {
                if (!gameOver) {
                    if (animationId) {
                        cancelAnimationFrame(animationId);
                        animationId = null;
                    } else {
                        lastTime = 0;
                        animationId = requestAnimationFrame(gameLoop);
                    }
                }
            }
        });

        // 重新开始按钮
        restartBtn.addEventListener('click', () => {
            resetGame();
            animationId = requestAnimationFrame(gameLoop);
        });

        // 初始绘制
        function init() {
            ctx.fillStyle = '#f5f5f0';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#ff5555';
            ctx.font = '26px Comic Sans MS';
            ctx.textAlign = 'center';
            ctx.fillText('按空格键开始看Eric拉粑粑', canvas.width / 2, canvas.height / 2);
        }

        // 初始化游戏
        init();
    </script>
</body>
</html>